/**
 *  Copyright Kirk Technologies.
 */

import * as React from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import { withStyles } from "@material-ui/core/styles";
import { DateField, EditButton, translate, NumberField } from "react-admin";

import { AvatarField } from "./AvatarField";
import { ColoredNumberField } from "./ColoredNumberField";
import { SegmentsField } from "./SegmentsField";

const listStyles: any = (theme: any) => ({
    card: {
        height: "100%",
        display: "flex",
        flexDirection: "column",
        margin: "0.5rem 0",
    },
    cardTitleContent: {
        display: "flex",
        flexDirection: "rows",
        alignItems: "center",
        justifyContent: "space-between",
    },
    cardContent: {
        ...theme.typography.body1,
        display: "flex",
        flexDirection: "column",
    },
});

export const MobileGrid: any = withStyles(listStyles)(
    translate(({ classes, ids, data, basePath, translate: trans }: any) => (
        <div style={{ margin: "1em" }}>
            {ids.map((id: any) => (
                <Card key={id} className={classes.card}>
                    <CardHeader
                        title={
                            <div className={classes.cardTitleContent}>
                                <h2>{`${data[id].first_name} ${data[id].last_name}`}</h2>
                                <EditButton resource="visitors" basePath={basePath} record={data[id]} />
                            </div>
                        }
                        avatar={<AvatarField record={data[id]} size="45" />}
                    />
                    <CardContent className={classes.cardContent}>
                        <div>
                            {trans("resources.customers.fields.last_seen_gte")}
                            &nbsp;
                            <DateField record={data[id]} source="last_seen" type="date" />
                        </div>
                        <div>
                            {trans("resources.commands.name", parseInt(data[id].nb_commands, 10) || 1)}
                            &nbsp;:&nbsp;
                            <NumberField
                                record={data[id]}
                                source="nb_commands"
                                label="resources.customers.fields.commands"
                                className={classes.nb_commands}
                            />
                        </div>
                        <div>
                            {trans("resources.customers.fields.total_spent")}
                            &nbsp; :{" "}
                            <ColoredNumberField
                                record={data[id]}
                                source="total_spent"
                                options={{ style: "currency", currency: "USD" }}
                            />
                        </div>
                    </CardContent>
                    {data[id].groups &&
                        data[id].groups.length > 0 && (
                            <CardContent className={classes.cardContent}>
                                <SegmentsField record={data[id]} />
                            </CardContent>
                        )}
                </Card>
            ))}
        </div>
    )),
);

MobileGrid.defaultProps = {
    data: {},
    ids: [],
};
